<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>展示文件的列表</title>
    <!--js文件引入   也可用thymeleaf 引入 <script th:src="@{/js/jquery-3.3.1.js}"></script>-->
    <script th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <script>
        /*发送ajax请求,修改下载次数,运用场景具体结合,异步请求    定时3秒发一次ajax请求
        * [[@{/file/findAllJson}]]  为thymeleaf 异步请求url的方式
        *  */
        $(function () {
            /*start 点击事件开启定时更新下载次数  定时任务赋值给time  可以添加关闭定时任务操作*/
            var time;
            $("#start").click(function () {
                console.log("开启定时更新下载次数...")
                time = setInterval(function () {
                    $.get("[[@{/file/showAllJson}]]",function (result) {
                        /*控制台打印回调数据*/
                        /*console.log(result);*/
                        /*给下载次数设置一个id,值为当前文件id ,为了,将异步获取到的所有数据,进行遍历,得到指定的id,然后进行下载次数的定时 修改*/
                        $.each(result,function (index, file) {
                            $("#" + file.id).text(file.downCounts);
                        })
                    });
                }, 3000);
            });
            $("#stop").click(function () {
                console.log("结束定时更新下载次数...")
                clearInterval(time);
            });
        });
    </script>
</head>
<body>
<h1>欢迎: <span th:if="${session.user!=null}" th:text="${session.user.name}"></span></h1>
<h3>文件列表 :</h3>
<button id="start" >开启定时更新</button>
<button id="stop" >结束定时更新</button>
<table border="1px">
    <tr>
        <th>ID</th>
        <th>文件原始名称</th>
        <th>文件新名称</th>
        <th>文件后缀</th>
        <th>储存路径</th>
        <th>文件大小</th>
        <th>类型</th>
        <th>是否是图片</th>
        <th>下载次数</th>
        <th>上传时间</th>
        <th>操作</th>
    </tr>
    <tr th:each="file,fileStat:${files}">
        <td><span th:text="${file.id}"/></td>
        <td><span th:text="${file.oldFileName}"/></td>
        <td><span th:text="${file.newFileName}"/></td>
        <td><span th:text="${file.ext}"/></td>
        <td><span th:text="${file.path}"/></td>
        <td><span th:text="${file.size}"/></td>
        <td><span th:text="${file.type}"/></td>
        <!--是图片就将图片显示出来,不是图片就显示否-->
        <td>
            <!--<span th:text="${file.isImage}"/>-->
            <img style="width: 100px; height: 100px" th:if="${file.isImage} == '是'"
                 th:src="${#servletContext.contextPath} + ${file.path} +'/' + ${file.newFileName}" alt="">
            <span th:if="${file.isImage} != '是'" th:text="${file.isImage}"></span>
        </td>
        <td><span th:id="${file.id}"  th:text="${file.downCounts}"/></td>
        <td><span th:text="${#dates.format(file.uploadTime,'yyyy-MM-dd')}"/></td>
        <td>
            <a th:href="@{/file/download(id=${file.id})}">下载</a>
            <!--传递参数后台进行判断,如果携带openStyle,就赋值给打开方式,inline是在线打开-->
            <a th:href="@{/file/download(id=${file.id},openStyle='inline')}">在线打开</a>
            <a th:href="@{/file/delete(id=${file.id})}">删除</a>
        </td>
    </tr>
</table>
<h3>上传文件:</h3>
<form th:action="@{/file/upload}" method="post" enctype="multipart/form-data">
    <input type="file" name="file"> <input type="submit" value="上传文件">
</form>
</body>
</html>